<template>
  <div id="purse_home">
    <div class="top">
      <div class="left">已绑定的卡片</div>
      <div class="right" @click="toPasswordFree1()">免密支付设置</div>
    </div>
    <div class="middle">
      <vant-list v-model="showAll1"
                 :finished="finished"
                 :loading="loading"
                 style="height: 700px; overflow-y: auto;width: 100%;">
        <van-cell v-for="(item,index) in displayedPurseList" :key="index">
          <van-swipe-cell>
            <div class="img"><img :src="item.bankIcon" alt="" width="50px" height="50px"></div>
            <div class="name">{{ item.bankName }}</div>
            <div class="pf" @click="toPasswordFree2(item)">{{ item.passwordFreeStatus === 1 ? "免密支付" : "" }}</div>
            <!-- 添加删除按钮 -->
            <!--        <div class="delete" @click="asyncDeleteItem(item.id)">删除</div>-->
            <template #right>
              <van-button square text="删除" type="danger" @click="asyncDeleteItem(item.id)" class="delete-button"/>
            </template>
          </van-swipe-cell>
        </van-cell>
      </vant-list>
      <div class="sm" v-if="!showAll">
        <span @click="SeeMore()">查看更多</span>
        <van-icon name="arrow-down"/>
      </div>
    </div>

    <div class="bottom">
      <van-button @click="toAddCard()">添加卡片</van-button>
    </div>
    <BottomPanel/>
  </div>
</template>

<script>
import {deletePurse, getPurse} from "@/api/purse/purse_home";
import BottomPanel from "@/views/bottomPanel.vue";

export default {
  components: {BottomPanel},
  data() {
    return {
      PurseList: [],
      displayedPurseList: [], // 用于存储要显示的数据
      showAll: false, // 标记是否显示全部数据
      initialLimit: 9, // 初始显示的条数
      showAll1: false,
      finished: false,
      loading: false,
    };
  },
  methods: {
    SeeMore() {
      this.showAll = true;
      this.displayedPurseList = this.PurseList;
    },
    async asyncDeleteItem(id) {
      try {
        await this.$dialog.confirm({
          message: '确定删除吗？',
        });
        // 调用删除方法
        await deletePurse(id);
        this.$toast.success('删除成功');
        // 更新列表
        this.getPurse();
      } catch (error) {
        console.error('删除银行卡信息失败', error);
      }
    },
    toPasswordFree1() {
      this.$router.push("/password_free");
    },
    toPasswordFree2(item) {
      this.$router.push({
        path: '/password_free',
        query: {item: item}
      });
    },
    toAddCard() {
      this.$router.push("/add_card");
    },
    getPurse() {
      const userId = localStorage.getItem("userId");
      getPurse(userId).then((res) => {
        this.PurseList = res.data.data;
        // 初始化显示数据为前 9 条
        this.displayedPurseList = this.PurseList.slice(0, this.initialLimit);
      });
    },
  },
  created() {
    this.getPurse();
  }
};
</script>

<style>
body {
  background-color: #F3FCFF;

  #purse_home {
    width: 100%;
    height: 100%;

    .top {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #DADEE0;

      .left {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        margin-left: 20px;
        font-size: 18px;
        font-weight: bold;
      }

      .right {
        width: 120px;
        height: 34px;
        margin-left: auto;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #4EA9CB;
        font-weight: bold;
        color: white;
        border-radius: 25px;
      }
    }

    .middle {
      width: 100%;
      height: 700px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .van-button {
        width: 66px;
        height: 100%;
        font-size: 16px;
        font-weight: bold;
        border: none;
      }

      .van-cell {
        width: 90%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F3FCFF;
        border-bottom: 1px solid #DADEE0;

        .delete-button {
          width: 64px;
          height: 64px;
          margin-left: 4px;
        }

        .pf {
          float: right;
          font-size: 16px;
          font-weight: bold;
          margin-top: 16px;
          color: #4B9EFF;
        }

        .img {
          float: left;
          margin-right: 10px;
        }

        .name {
          float: left;
          font-size: 18px;
          margin: 16px 0 0 10px;
          font-weight: bold;
        }
      }

      .sm {
        width: 90%;
        height: 4%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 180px;
      }
    }


    .bottom {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 100px;

      .van-button {
        width: 90%;
        height: 100%;
        font-size: 18px;
        font-weight: bold;
        border: none;
        background-color: #4EA9CB;
        color: white;
        border-radius: 25px;
      }
    }
  }
}
</style>